﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <link th:href="@{/public/front/css/page.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/public/front/js/jquery.z-pager.js}"></script>
    <title>用户信息</title>
</header>
<header url="/front/discover"></header>
<style>
    .class-details h3 a {
        font-size: 28px;
        color: #141514;
    }

    .remove-btn {
        visibility: hidden;
        position: absolute;
        right: 0px;
        font-size: 20px
    }

    .class-meta p {
        text-align: center;
    }
</style>
<body>

<ol class="breadcrumb">
    <li title="返回上一页"><a href="javascript:history.go(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a></li>
</ol>

<!-- Breadcrumb  -->
<section class="breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xs-12 text-center">
                <div class="breadcrumb-content">
                    <input type="hidden" id="customerId" style="display: none;" th:value="${customer.id}">
                    <h2 th:text="${customer.alias}"></h2>
                </div>
            </div>
        </div>
        <hr/>
        <div class="row" id="statisContainer">
            <div class="col-sm-4 col-xs-12 mix kinder play">
                <div class="single-class">
                    <div class="class-details">
                        <h3><label>作品数</label></h3>
                        <p th:text="${#maps.containsKey(statisData,'suitCount')}?${statisData.suitCount}:0"></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xs-12 mix kinder play">
                <div class="single-class">
                    <div class="class-details">
                        <h3><label>浏览量</label></h3>
                        <p th:text="${#maps.containsKey(statisData,'scanCount')}?${statisData.scanCount}:0"></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xs-12 mix kinder play">
                <div class="single-class">
                    <div class="class-details">
                        <h3><label>收藏量</label></h3>
                        <p th:text="${#maps.containsKey(statisData,'collectCount')}?${statisData.collectCount}:0"></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-xs-12 mix kinder play" id="myCollectContainer" style="display: none;">
                <div class="single-class">
                    <div class="class-details">
                        <h3><label style="cursor: pointer;" onclick="getMyCollect()">我的收藏</label></h3>
                        <p><a href="javascript:;" onclick="getMyCollect()" th:text="${#maps.containsKey(statisData,'myCollectCount')}?${statisData.myCollectCount}:0"></a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.breadcrumb-section  -->

<!-- Team Section -->
<section class="team-section teacher-page">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-xs-12 left-align">
                <h2 class="title">TA的作品</h2>
                <p class="subtitle color" id="sologan" style="display: none">
                </p>
            </div>
            <div class="col-sm-6 col-xs-12 right-align">
                <a onclick="createSuit()" id="create-btn" style="display: none;" href="javascript:;" class="primary-btn pull-right"><span>继续创作</span></a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-4 col-xs-12 text-center float-left"
                 th:if="${not #lists.isEmpty(suitListRespVos)}"
                 th:each="s,status:${suitListRespVos}">
                <div class="single-team" style="position: relative">
                    <a href="javascript:;" class="remove-btn" style="display: none; z-index: 100"
                       th:onclick="|deleteSuit(${s.id})|">
                        <span class="glyphicon glyphicon-remove" style="color: red;"></span></a>
                    <div style="cursor: pointer; class="class-img"
                         th:onclick="|location.href='@{|/front/user_info_detail/${s.customerId}/${s.id}|}';|">
                        <img alt="" th:src="${s.imgUrl}" onerror="loadError(this)" style="background-size: 100% auto;height: 220px; object-fit: cover">
                        <div class="class-hover">
                            <a class="popup" th:href="@{|/front/user_info_detail/${s.customerId}/${s.id}|}"
                               name="user-info-detail-link"><span class="glyphicon glyphicon-link"></span>
                            </a>
                        </div>
                    </div>
                    <div class="class-details">
                        <div>
                            <div class="text-title text-single-line" th:title="${s.source}"
                                 style="text-align: center; margin-bottom: 5px; width: auto; font-weight: 400; font-size: 24px"
                                 th:text="${s.source}"></div>
                            <div class="text-single-line statusCn" style="display: none; font-weight: 400; font-size: 24px" th:text="${#strings.length(s.statusCn) gt 0 ? s.statusCn : '&nbsp;'}"></div>
                        </div>
                        <p style="margin-top: 5px; line-height: 23px" class="text-single-line"
                           th:text="${#strings.length(s.descrption) > 28} ? ${#strings.substring(s.descrption, 0, 26) + '...'} : ${s.descrption}"></p>

                        <div class="clearfix row">
                            <div class="class-meta" style="display: inline-block">
                                <span>浏览</span>
                                <p th:text="${s.scanCount}"></p>
                            </div>
                            <div class="class-meta" style="display: inline-block">
                                <span>收藏</span>
                                <p th:text="${s.collectCount}"></p>
                            </div>
                            <div class="class-meta" style="display: inline-block">
                                <span>评论</span>
                                <p th:text="${s.commentCnt}"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.team-section -->

<section class="callto-action-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="callto-content">
                    <h2>不一样的时间，不一样的心境.</h2>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<th:block th:include="commons/front::footer">FOOTER</th:block>
<th:block th:include="commons/front::login">LOGIN</th:block>
<script>
    $(function () {
        if (isLogin()) {
            var user = getUserInfo();
            $("#sologan").text(user.sologan);

            var customerId = $("#customerId").val();
            if (customerId == getUserInfo().id) {
                $(".remove-btn").show();
                $("#create-btn").show();
                $(".statusCn").css({"display": "inline-block", "color": "red"});
                $(".container .title").text("我的作品");
                $("#sologan").show();

                $("#statisContainer div.play").removeClass("col-sm-4").addClass("col-sm-3");
                $("#myCollectContainer").show();
            }
        }

        $(".single-team").hover(function () {
            $(this).find("a.remove-btn").css("visibility", "visible")
        }, function () {
            $(this).find("a.remove-btn").css("visibility", "hidden")
        })
    });

    /**
     * 删除套装
     * @param id
     */
    function deleteSuit(id) {
        Confirm("是否确认删除？", function () {
            $.post(ctx + "/front/api/suit/saveSuit", {id: id, status: 0}, function (rtn) {
                if (rtn.code != 1) {
                    Alert(rtn.message);
                    return;
                }
                Alert("删除成功", function () {
                    location.reload(true);
                });
            });
        })
    }

    function getMyCollect() {
        if (isLogin()) {

            var customerId = $("#customerId").val();
            if (customerId == getUserInfo().id) {
                location.href = ctx + "/front/collect-list/"+customerId;
            }
        }
    }
</script>

</body>
</html>